<template>
	<view>
		<view class="tabnav">
			<view v-for="(item, index) in lists" @click="clickAdd(index)" :key="index" :class="{ red: order === index }">
				<text>{{ item.name }}</text>
			</view>
		</view>
		<!-- 列表 -->
		<view class="headernav">
			<view class="headerone" v-if="this.order == 0">
				<view style="width: 25%;">建仓时间</view>
				<view>交易品类</view>
				<view>方向</view>
				<view>建仓价格</view>
				<view>手数</view>
				<view>浮动盈亏</view>
			</view>
			<view class="headerone" v-if="this.order == 1">
				<view style="width: 25%;">建仓时间</view>
				<view>交易品类</view>
				<view>方向</view>
				<view>建仓价格</view>
				<view>手数</view>
				<view>延期费</view>
			</view>
			<view v-if="this.order == 0">
				<view class="headerone" @tap="deilsone(item)" v-for="(item, index) in history" :key="index">
					<view style="width: 25%;">{{item.create_date | timing}}</view>
					<view>{{ item.trade_kind }}</view>
					<view>
						<view v-if="item.trade_type == 'buy'">买入</view>
						<view v-if="item.trade_type == 'sel'">卖出</view>
					</view>
					<view>{{ item.open_price }}</view>
					<view>{{ item.volumn }}</view>
					<view>
						<view v-if="item.trade_type == 'sel'">
							<view v-if="item.trade_kind == 'BTCUSDT'">{{ subFun(BTCUSDT, item.open_price) * item.volumn * 10 | pointThree}}</view>
							<view v-if="item.trade_kind == 'ETHUSDT'">{{ subFun(ETHUSDT, item.open_price) * item.volumn * 40 | pointThree}}</view>
							<view v-if="item.trade_kind == 'LTCUSDT'">{{ subFun(LTCUSDT, item.open_price) * item.volumn * 50 | pointThree}}</view>
							<view v-if="item.trade_kind == 'IFLUSDT'">{{ subFun(IFLUSDT, item.open_price) * item.volumn * 40 | pointThree}}</view>
							<view v-if="item.trade_kind == 'ICLUSDT'">{{ subFun(ICLUSDT, item.open_price) * item.volumn * 40 | pointThree}}</view>
						</view>
						<view v-if="item.trade_type == 'buy'">
							<view v-if="item.trade_kind == 'BTCUSDT'">{{ subFun(item.open_price,BTCUSDT) * item.volumn * 10 | pointThree}}</view>
							<view v-if="item.trade_kind == 'ETHUSDT'">{{ subFun(item.open_price,ETHUSDT) * item.volumn * 40 | pointThree}}</view>
							<view v-if="item.trade_kind == 'LTCUSDT'">{{ subFun(item.open_price,LTCUSDT) * item.volumn * 50 | pointThree}}</view>
							<view v-if="item.trade_kind == 'IFLUSDT'">{{ subFun(item.open_price,IFLUSDT) * item.volumn * 40 | pointThree}}</view>
							<view v-if="item.trade_kind == 'ICLUSDT'">{{ subFun(item.open_price,ICLUSDT) * item.volumn * 40 | pointThree}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="this.order == 1">
				   <view class="headerone" @tap="deils(item.id,item.create_date)" v-for="(item, index) in historytwo" :key="index">
				   <view style="width: 25%;">{{item.create_date |timing}}</view>
				   	<view>{{ item.trade_kind }}</view>
				   	<view>
				   		<view v-if="item.trade_type == 'buy'">买入</view>
				   		<view v-if="item.trade_type == 'sel'">卖出</view>
				   	</view>
				   	<view>{{ item.open_price }}</view>
				   	<view>{{ item.volumn }}</view>
				   	<view>{{item.storage_cost}}</view>
				   </view>
				   
				    <view class="loading1" @tap="onReachBottoms">{{ contentdown }}</view>
			</view>
		</view>
	</view>
</template>
<script>
	var _self,
		page = 1,
		timer = null,
		getMove = 10;
import { mapState, mapGetters } from 'vuex';
import request from '@/utils/request';
import { toast } from '@/utils/toast';
import moment from "moment";
export default {
	data() {
		return {
			lists: [{ name: '当前持仓', id: 0 }, { name: '历史持仓', id: 1 }],
			order: 0,
			currentPageTwo: 0,
			history: [], //当前持仓
			trade: '',
			historytwo:[],//历史
			createDate:"",
			flagBtm: false,
			contentdown: '查看更多'
		};
	},
	onShow() {
		this.orderId();
		this.Historical();
	},
	
	created(){
		console.log(this.BTCUSDT)
	},
	
	computed: {
		
		...mapState('user', ['userinfo']),
		...mapState('user', ['BTCUSDT']),
		...mapState('user', ['ETHUSDT']),
		...mapState('user', ['LTCUSDT']),
		...mapState('user', ['IFLUSDT']),
		...mapState('user', ['ICLUSDT']),
		        
		 
	},
	filters:{
		 timing(val) {
		      return moment(val).format("YYYY-MM-DD HH:mm:ss");
		    },
			pointThree(val) {
				return Number(val).toFixed(2);
			}
	},
	methods: {
		onReachBottoms() {
			this.Historical();
	    },
		subFun(arg1, arg2) {
			var r1, r2, m, n;
			try {
				r1 = arg1.toString().split('.')[1].length;
			} catch (e) {
				r1 = 0;
			}
			try {
				r2 = arg2.toString().split('.')[1].length;
			} catch (e) {
				r2 = 0;
			}
			m = Math.pow(10, Math.max(r1, r2));
			n = r1 >= r2 ? r1 : r2;
			return ((arg1 * m - arg2 * m) / m).toFixed(n);
		},
		clickAdd(index) {
			console.log(index);
			this.order = index;
			if (this.order == 0) {
				this.orderId();
			} else {
				this.Historical();
			}
		},
		// 当前持仓
		orderId() {
			let that = this;
			request('/trades/position/getlist', 'POST', {
				guid: '001',
				loginId: that.userinfo.Customer.loginId,
				sessionId: that.userinfo.SessionId
			}).then(res => {
				res.data.PositionList.reverse()
				if (res.data.ResultCD == 'I001') {
					that.history = res.data.PositionList.reverse();
				}
				try{
					that.history = JSON.parse(res.data).PositionList.reverse();
				}catch(e){
					//TODO handle the exception
					that.history = res.data.PositionList.reverse();
				}
			});
		},
		// 历史持仓
		Historical() {
			page = 1;
			getMove++;
			this.loadingType = 0;
			uni.showNavigationBarLoading()
			
			request('/trades/hisposition/getlist', 'POST', {
				guid: '001',
				loginId: this.userinfo.Customer.loginId,
				sessionId: this.userinfo.SessionId,
				skip: this.currentPageTwo,
				pagesize: getMove
			}).then(res => {
				console.log(res.data, 67676767);
				getMove++;
				this.historytwo = res.data.PositionList
				uni.stopPullDownRefresh();
				uni.hideNavigationBarLoading();
				try{
					this.historytwo = JSON.parse(res.data).PositionList;
				}catch(e){
					//TODO handle the exception
					this.historytwo = res.data.PositionList
				}
			});
		},
		
		deils(num){
			uni.navigateTo({
				url:'./detailss?id='+ num 
			})
		},
		// 跳转持仓记录
		deilsone(num){
			
			uni.navigateTo({
				url:'./detailrecord?msg='+ JSON.stringify(num)
			})
		}
	}
};
</script>
<style lang="scss" scoped>
	.loading1 {
		font-size: 30upx;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 19upx;
		text-align: center;
		display: flex;
		justify-content: center;
	}
.tabnav {
	width: 95%;
	display: flex;
	margin: 20upx auto;
	align-items: center;
	justify-content: center;
	font-size: 28upx;
	color: #2d2f56;

	& > view {
		// width: 108upx;
		height: 51upx;
		font-size: 28upx;
		padding: 0 20upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		background: rgba(247, 247, 251, 1);
	}
}
.red {
	// width: 108upx;
	height: 51upx;
	padding: 0 20upx;
	background: rgba(255, 255, 255, 1);
	border: 1upx solid rgba(104, 129, 255, 1);
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #6881ff !important;
}
.headernav {
	.headerone {
		
		justify-content: space-between;
		font-size: 26upx;
		color: #2d2f56;
		display: flex;
		margin: 0 auto;
		width: 95%;
		text-align: center;
		align-items: center;
		border-bottom:1upx solid #f7f7fb;
		padding-bottom: 10upx;
		&>view{
			width: 20%;
			height: 100%;
			// border: 1upx solid red;
			font-size:26upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(45,47,86,1);
			padding-top: 20upx;
		}
	}
}
</style>
